import React, { Component } from 'react'

// 受控：value 值收到了 state 中数据的控制，同时视图对 value 的修改会影响 state 中的数据（双向数据绑定）
export default class App extends Component {
  // !#1 准备控制 value 的变量
  state = {
    username: 'xxx',
    content: '',
    frame: 'vue',
    sex: 'unknown',
    checkbox: ['apple'],
  }
  // 操作 input 的
  handleInput = (e) => {
    console.log(e.target.name)
    // !#4 修改 this.state.username
    this.setState({
      [e.target.name]: e.target.value,
    })
  }
  // 操作 textarea 的
  handleTextArea = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }
  // 操作 select 的
  handleSelect = (e) => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }
  // 操作 radio 的
  handleRadio = (e) => {
    // console.log(e.target.value)
    this.setState({
      [e.target.name]: e.target.value,
    })
  }
  handleCheckbox = (e) => {
    const idx = this.state.checkbox.indexOf(e.target.value)
    // 再根据下标删除，说明原来有
    if (idx !== -1) {
      // 找到了，下面写法不 ok，直接修改原数据拉
      // this.state.checkbox.splice(idx, 1)
      // 1. 先拷贝一份元数据
      const copyCheckbox = [...this.state.checkbox]
      // 2. 删除拷贝的数据
      copyCheckbox.splice(idx, 1)
      // 3. 用删除过后的拷贝的数据覆盖 this.state.checkbox
      this.setState({
        checkbox: copyCheckbox,
      })
    } else {
      this.setState({
        checkbox: [...this.state.checkbox, e.target.value],
      })
    }
  }
  render() {
    const { username, content, frame, sex, checkbox } = this.state
    return (
      <ul>
        <li>
          <label htmlFor='username'>用户名</label>
          {/* //!#2 把 this.state.username 给表单的 value */}
          {/* //!#3 绑定 onChange 事件 */}
          <input
            id='username'
            name='username'
            type='text'
            value={username}
            onChange={this.handleInput}
          />
        </li>
        <li>
          <label htmlFor='content'>其他信息</label>
          <textarea
            value={content}
            id='content'
            name='content'
            cols='30'
            rows='10'
            onChange={this.handleTextArea}
          ></textarea>
        </li>
        <li>
          <label htmlFor='frame'>框架</label>
          {/* 当 select 上面的 value 和 option 的某一个的 value 一样的话，就会选中 */}
          <select
            id='frame'
            name='frame'
            value={frame}
            onChange={this.handleSelect}
          >
            <option value='react'>React</option>
            <option value='vue'>Vue</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
        <li>
          {/* 当 sex 和 input 的 value 一样的情况下，应该选中 */}
          <input
            type='radio'
            id='male'
            name='sex'
            value='male'
            checked={sex === 'male'}
            onChange={this.handleRadio}
          />
          <label htmlFor='male'>男</label>
          <input
            type='radio'
            id='female'
            name='sex'
            value='female'
            checked={sex === 'female'}
            onChange={this.handleRadio}
          />
          <label htmlFor='female'>女</label>
          <input
            type='radio'
            id='unknown'
            name='sex'
            value='unknown'
            checked={sex === 'unknown'}
            onChange={this.handleRadio}
          />
          <label htmlFor='unknown'>未知</label>
        </li>
        <li>
          {/* 当 checkbox 数组里面包含 'apple' 应该选中 */}
          <input
            type='checkbox'
            id='apple'
            value='apple'
            checked={checkbox.includes('apple')}
            onChange={this.handleCheckbox}
          />
          <label htmlFor='apple'>Apple</label>
          <input
            type='checkbox'
            id='orange'
            value='orange'
            checked={checkbox.includes('orange')}
            onChange={this.handleCheckbox}
          />
          <label htmlFor='orange'>Orange</label>
        </li>
      </ul>
    )
  }
}
